<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style type="text/css">
		body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		
		#content {
			margin: 0;
			padding: 0;
			table-layout: fixed;
		}
	
		#content td {
			margin: 0;
			padding: 0;
			text-align: center;
			text-valign: middle;
			font-size: 4vw;
		}
		
		#content tr {
			margin: 0;
			padding: 0;
		}
		
		.border_left {
			border-left: 1px solid black;
		}
		
		.border_top {
			border-top: 1px solid black;
		}
		
		.redstone_on {
			background-color: rgb(255, 0, 0);
		}
		
		.redstone_override {
			background-color: rgb(0, 100, 255) !important;
		}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="wdlib.js"></script>
	<script type="text/javascript">
		var screenW = 1;
		var screenH = 1;
		var screenData = [ 0 ];
		var hasRedOutput = false;
	
		function generateTable() {
			var ppp = $(window).width() / (screenW - 0.25);
			var border = Math.floor(ppp * 0.125);
			ppp = Math.floor(ppp);
		
			for(y = 0; y < screenH; y++) {
				var line = "<tr>";
				for(x = 0; x < screenW; x++) {
					var classes = [];
					var cw = ppp;
					var ch = ppp;
					var value = screenData[(screenH - y - 1) * screenW + x];
					
					if(x > 0)
						classes.push("border_left");
						
					if(x <= 0 || x >= screenW - 1)
						cw -= border;
						
					if(y > 0)
						classes.push("border_top");
						
					if(y <= 0 || y >= screenH - 1)
						ch -= border;
						
					if(value > 0)
						classes.push("redstone_on");
				
					line += "<td id=\"cell_" + x + "_" + y + "\" class=\"" + classes.join(" ") + "\" style=\"width: " + cw + "px; height: " + ch + "px;\" onclick=\"wdToggle(" + x + ", " + y + ")\">" + value + "</td>";
				}
					
				line += "</tr>";
				$("#content").append(line);
			}
		}
		
		/* This function has to be named that way */
		function webdisplaysRedstoneCallback(x, y, value) {
			y = screenH - y - 1; //Flip Y axis
			var elem = $("#cell_" + x + "_" + y);
			
			elem.html("" + value);
			
			if(value > 0 && !elem.hasClass("redstone_on"))
				elem.addClass("redstone_on");
			else if(value <= 0 && elem.hasClass("redstone_on"))
				elem.removeClass("redstone_on");
		}
		
		/* This function also has to be named that way */
		function webdisplaysUpgradesChanged() {
			location.reload();
		}
	
		$(function() {
			wdGetSize(function(w, h) {
				screenW = w;
				screenH = h;

                wdGetRedstoneArray(function(array) {
                    screenData = array;
                    generateTable();

                    wdGetUpgrades(function(upgrades) {
                        for(i = 0; i < upgrades.length; i++) {
                            if(upgrades[i] == "webdisplays:redoutput") {
                                hasRedOutput = true;
                                fetchEmissionData();
                                break;
                            }
                        }
                    });
                });
			});
		});
		
		function wdToggle(x, y) {
			if(hasRedOutput) {
				var elem = $("#cell_" + x + "_" + y);
				y = screenH - y - 1;
				
				if(elem.hasClass("redstone_override")) {
					elem.removeClass("redstone_override");
					wdSetRedstoneAt(x, y, false);
				} else {
					elem.addClass("redstone_override");
					wdSetRedstoneAt(x, y, true);
				}
			}
		}

		function fetchEmissionData() {
			wdGetEmissionArray(function(emission) {
				for(y = 0; y < screenH; y++) {
				    for(x = 0; x < screenW; x++) {
                        var elem = $("#cell_" + x + "_" + y);

				        if(emission[y * screenW + x]) {
                            if(!elem.hasClass("redstone_override"))
                                elem.addClass("redstone_override");
						} else if(elem.hasClass("redstone_override"))
						    elem.removeClass("redstone_override");
					}
				}
			});
		}
	</script>
</head>
<body>
	<table id="content" cellspacing="0" cellpadding="0">
	</table>
</body>
</html>
